<template>
    <div class="home home-page">
        <First @funTo="setHomeTo" @funSymbol="funBal()" v-if="homePage==1"  :loginState=isLogin ></First>
        <Market v-if="homePage==2" @funSymbol="funBal()" ></Market>
        <trade v-if="homePage==3"></trade>
        <otc v-if="homePage==4"></otc>
        <my v-if="homePage==5"></my>
        <div class="nav footerBox">
            <a @click="homePageChange(1)">
                <div v-if="homePage==1">
                    <i  class="nav-link"> <img src="../../assets/nav1.png"> </i><span>首页</span>
                </div>
               <div v-if="homePage!=1">
                   <i   class="nav-link"> <img src="../../assets/nav2.png"> </i><span>首页</span>
                </div>
            </a>
            <a @click="homePageChange(2)">
                <div v-if="homePage==2">
                    <i  class="nav-link"> <img src="../../assets/market-footer.png"> </i><span>行情</span>
                </div>
                <div v-if="homePage!=2">
                    <i  class="nav-link"> <img src="../../assets/market-footer1.png"> </i><span>行情</span>
                </div>
            </a>
            <a @click="homePageChange(3)">
                <div v-if="homePage==3">
                    <i  class="nav-link"> <img src="../../assets/trade-footer1.png"> </i><span>币币交易</span>
                </div>
                <div v-if="homePage!=3">
                    <i  class="nav-link"> <img src="../../assets/trade-footer2.png"> </i><span>币币交易</span>
                </div>
            </a>
            <a @click="homePageChange(4)">
                 <div v-if="homePage==4">
                    <i  class="nav-link"> <img style="width:46px" src="../../assets/otc-footer.png"> </i><span>OTC</span>
                </div>
                <div v-if="homePage!=4">
                    <i  class="nav-link"> <img style="width:46px" src="../../assets/otc-footer1.png"> </i><span>OTC</span>
                </div>
            </a>
            <a @click="homePageChange(5)">
                <div v-if="homePage==5">
                    <i  class="nav-link"> <img src="../../assets/wo-footer2.png"> </i><span>我的</span>
                </div>
                <div v-if="homePage!=5">
                    <i  class="nav-link"> <img src="../../assets/wo-footer1.png"> </i><span>我的</span>
                </div>
            </a>
        </div>
    </div>
</template>

<script>
 import First from '@/page/first/first';
 import Market from '@/page/market/market';
 import trade from '@/components/trade/trade';
 import otc from '@/page/trade/home'
 import my from '@/page/my/my'
 import {mapMutations, mapActions} from 'vuex';
export default {
    components: {First,Market,trade,otc,my},
      data(){
         return {
         homePage:'',
         isLogin:''
         }
    },
    mounted() {
         var u = navigator.userAgent, app = navigator.appVersion;
 var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //g
    if (isAndroid) {
        this.isAndroid=true;
       //这个是安卓操作系统
        document.getElementsByTagName("body")[0].className="android-load page-finance page-index";
    }
         this.getSession();
        if(this.$store.state.homePage==1||this.$store.state.homePage==null){
            this.homePage=1
        }else if(this.$store.state.homePage==2){
            this.homePage=2
        }else if(this.$store.state.homePage==3){
            this.homePage=3
        }else if(this.$store.state.homePage==4){
            this.homePage=4;
        }else if(this.$store.state.homePage==5){
            this.homePage=5;
        }
         !function (w) {
            InitView();
            var evt = "onorientationchange" in w ? "orientationchange" : "resize";
            w.addEventListener(evt, function () {
                InitView()
            }, false);
    
            function InitView() {
                var t = 750,
                    w = screen.width,
                    h = screen.height,
                    a = w / t,
                    n = w.viewMeta || document.createElement('meta');
                w.viewMeta || document.getElementsByTagName("head")[0].appendChild(n);
                n.setAttribute('name', 'viewport');
                n.setAttribute('content', "width=" + t + ", initial-scale=" + a + ",maximum-scale=" + a + ",minimum-scale=" + a + ", user-scalable=no,target-densitydpi=device-dpi,minimal-ui,uc-fitscreen=no");
                window.viewPortNum = a;
            }
            w.showPlaceholder = 1;
        }(window);
    
        var PAGE = location.pathname.replace(new RegExp('/(?:\\w{2}-\\w{2}/)?'), "").split('/')[0];
        window.onbeforeunload = function () {
            localStorage.removeItem('isPublicPage')
             };
    },
    methods: {
         ...mapMutations([
                'SET_HOME_PAGE','IS_LOGIN'
            ]),
              setHomeTo(val){
                   this.homePage=val;
        },
           getSession () {
               let self=this;
            this.$http.post('v1/session?'+ new Date().getTime(), {func:""}).then((res) => {
                console.log()
                      if(res.data.code==1){
                          self.isLogin=1;
                           this.IS_LOGIN({isLogin:1});
                    }else{
                           this.IS_LOGIN({isLogin:0});
                     localStorage.setItem("cookie", document.cookie)
                    }
                })
            },
        funBal(){
             this.homePage=3;
        },
        homePageChange(val){
             this.homePage=val;
             this.SET_HOME_PAGE({homePage:val});
             if(val==4||val==5){
               if( this.isLogin==1){
            this.$router.push('/login');
               this.SET_HOME_PAGE({homePage:1});
                }
            }
        }
    },
}
</script>

<style lang='less' scoped>
.home-page{
.footerBox {
    padding: 20px 0px 0;
    height: 106px;
    min-height:106px;
    width: 100%;
    box-shadow: 0 0 16px rgba(0,0,0,.1);
    background: #222240;
    right: 0;
    left: 0;
    z-index: 9
}
// 设置固定定位,将bottom设置为0
.footerBox {
	position:fixed;
    bottom: 0;
}
// 判断iphoneX 将 footerBox 的 padding-bottom 填充到最底部
@supports (bottom: env(safe-area-inset-bottom)) {
	.footerBox {
		padding-bottom: env(safe-area-inset-bottom);
	}
}
.nav a {
    color: #E0E0F9;
    float: left;
    width: 20%;
    height: 72px;
    text-align: center;
    font-size: 20px;
    white-space: nowrap
}

.nav a.cur {
    color: #1882d4
}

.nav a i {
    display: block;
    font-size: 40px;
    height: 60px;
    line-height: 50px;
}

.nav a .mobile_icon_market {
    font-size: 36px
}

.nav a .mobile_icon_trade {
    font-size: 42px
}
#app .nav .nav-link img{
        height: 42px;
    width: 42px;
}
#app .nav .nav-link{
    display: flex;
    flex-direction: column;
    font-size: 20px;
        color: #E0E0F9;
        align-items: center;
        justify-content: start;
        height: 56px;
}
.nav:after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    background-color: #222240;
    height: 34px;
    bottom: -34px;
    left: 0
}
}
</style>